<template>
	<view class="login-page flexc flex-j-c">
		<image src="https://mp-35ac8dce-f55e-460b-84aa-0631eda8098e.cdn.bspapp.com/wxhome/20220120125043_32b3d.jpg" mode="aspectFill" class="bg-img"></image>
		<view class="login-wrap">
			<uni-card class="box">
			 <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#007aff"></uni-segmented-control>
				<view class="content">
					<view v-show="current === 0 || current === 1">
						<view class="login-box flexr flex-a-c ">
							<text class="f26">账号：</text>
							<input type="text" class="flex1 p-l-20 b-t" placeholder="请输入账号" maxlength="11" v-model='phone' placeholder-class="f26">
						</view>
						<view class="login-box flexr flex-a-c">
							<text class="f26">密码：</text>
							<input type="password" class="flex1 p-l-20 b-t" placeholder="请输入6位数密码" v-model='pas' maxlength="6" placeholder-class="f26">
						</view>
						<button :disabled='!phone||!pas' type='primary' @click="submitForm">{{current===0?'登录':'注册'}}</button>
					</view>
					
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
import { reactive, toRefs } from "vue"
import requestApi  from '../../utils/api.js'
import { useStore } from "../../store/index.js"
	export default {
		setup(){
			const store = useStore()
			const data = reactive({
				items: ['登录', '注册',],
				current: 0,
				phone:'',
				pas:''
				
			})
			if(store.j_token){
				uni.switchTab({
					url:'/pages/index/index'
				})
				return
			}
			//切换导航
			const onClickItem = e=>{
				console.log(e);
				data.current = e.currentIndex
				data.phone=''
				data.pas=''
			}
			// 导航1登录的事件
			const submitForm = ()=>{
				if(data.phone.length<11){
					uni.showToast({
						title:'手机号格式不正确',
						icon:'none'
					})
					return 
				}
				// 注册的逻辑
				const params = {
					userName : data.phone,
					password: data.pas,
					isSign: data.current,
					type:'login'
				}
				requestApi('jSign',params).then(res=>{
					if(res.result.status === 'S'){
						uni.showToast({
							title:res.result.message,
							icon:'none'
						})
						if(data.current==1){
							data.current = 0
							data.phone=''
							data.pas=''
						}else{
							store.j_token = res.result.data._id
							store.userInfo = res.result.data
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					}else{
						uni.showToast({
							title:res.result.message,
							icon:'none'
						})
						data.phone=''
						data.pas=''
					}
				})
			}
			return {
				...toRefs(data),
				onClickItem,
				submitForm
			}
		}
	}
</script>

<style lang="scss" >
	
	.login-page{
		width: 100%;
		height: 100%;
		position: relative;
		// background: url('https://img0.baidu.com/it/u=1855194094,320785998&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888') no-repeat ;
		// background-size: 100% 100%;
		.bg-img{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		.f26{
			font-size: 26rpx;
		}
		.login-wrap{
			opacity: .9;
		}
		.login-box{
			height: 80rpx;
			margin-top: 20rpx;
			line-height: 80rpx;
			
		}
		button{
			margin-top: 60rpx;
			
		}
	}
</style>
